<template>
    <div  class="p16 flex-column-null-between container" style="width: 98%;">
       <el-row>
            <el-col :span="12">
                <div class="grid-content bg-purple" >
                    <div>
                        <div class="search-item">
                            <el-input
                                    size="small"
                                    v-model="queryParams.keyWord"
                                    class="input-width clear-input"
                                    suffix-icon="el-icon-search"
                                    clearable
                                    placeholder="请输入字典名称"
                            ></el-input>
                        
                        </div>
                        <div class="search-item">
                            <el-checkbox  v-model="queryParams.childFlag">展示子字典</el-checkbox>
                        </div>

                        <div class="search-item">
                            <el-button type="primary" size="small"  @click="selectDicList">搜索</el-button>
                            <el-button type="primary" size="small"  @click="addParentDicVo">添加</el-button>
                        </div>
                    </div>

                    <div class="table">
                        <el-table
                                :data="parentTableData"
                                size="small"
                                highlight-current-row
                                @current-change="handleDataChange"
                                :row-style="{height:'0'}"
                                height="calc(100vh - 260px)"
                                v-loading="loading">
                            <el-table-column
                                    v-for="(item,index) in parentFields"
                                    :key="index"
                                    :label="item.label"
                                    :prop="item.prop"
                                    :min-width="item.width"
                                    :fixed="item.fixed"
                            >
                        
                                <template v-if="item.prop == 'status'" scope="scope">
                                   <el-switch v-model="scope.row.status"
                                        active-color="limegreen"
                                        inactive-color="red"
                                        active-value="ACTIVE"
                                        inactive-value="DISABLE"
                                        @change="changeStatus(scope.row)">
                                    </el-switch>
                                </template>
                                <template v-else-if="item.prop == 'operation'" scope="scope">
                                    <el-button @click="editParentDicVo(scope.row)" type="text" size="small">编辑</el-button>
                                    <el-button @click="removeParentDicVo(scope.row)" type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                            
                        </el-table>
                        <div class="page-container">
                            <el-pagination
                                    :page-sizes="[10, 20, 30, 50]"
                                    @size-change="parentHandleSizeChange"
                                    @current-change="parentHandleCurrentChange"
                                    :current-page.sync="parentNowPage"
                                    :page-size="10"
                                    layout="sizes,total, prev, pager, next"
                                    :parentTotal="parentTotal">
                            </el-pagination>
                        </div>
                    </div>
                    
                </div>
            </el-col>

            <el-col :span="11" style="margin-left:10px">
               
                <div class="grid-content bg-purple-light">
                    <div >
                        <div class="search-item">
                            <el-button type="primary" size="small"  @click="addChildDicVo">添加</el-button>
                        </div>
                    </div>

                    <div class="table">
                        <el-table
                                :data="childTableData"
                                size="small"
                                :row-style="{height:'0'}"
                                height="calc(100vh - 260px)"
                                v-loading="childLoading">
                            <el-table-column
                                    v-for="(item,index) in childFields"
                                    :key="index"
                                    :label="item.label"
                                    :prop="item.prop"
                                    :min-width="item.width"
                                    :fixed="item.fixed"
                            >
                                <template v-if="item.prop == 'status'" scope="scope">
                                   <el-switch v-model="scope.row.status"
                                        active-color="limegreen"
                                        inactive-color="red"
                                        active-value="ACTIVE"
                                        inactive-value="DISABLE"
                                        @change="changeStatus(scope.row)">
                                    </el-switch>
                                </template>
                                <template v-else-if="item.prop == 'operation'" scope="scope">
                                    <el-button @click="editChildDicVo(scope.row)" type="text" size="small">编辑</el-button>
                                    <el-button @click="removeChildDicVo(scope.row)" type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                            
                        </el-table>
                        <div class="page-container">
                            <el-pagination
                                    :page-sizes="[10, 20, 30, 50]"
                                    @size-change="childHandleSizeChange"
                                    @current-change="childHandleCurrentChange"
                                    :current-page.sync="childNowPage"
                                    :page-size="10"
                                    layout="sizes,total, prev, pager, next"
                                    :childTotal="childTotal">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </el-col>
       </el-row>
       

        <!-- 编辑字典 -->
        <addDic ref="addDic" @success="selectDicList('init')"/>
        <!-- 添加字典 -->
        <editDic ref="editDic" @success="selectDicList('init')"/>

        
        <!-- 编辑字典 -->
        <editChildDic ref="editChildDic" @success="selectChildDicList('init')"/>
        <!-- 添加字典 -->
        <addChildDic ref="addChildDic" @success="selectChildDicList('init')"/>
    </div>
</template>

<script>
    import addDic  from "./components/AddDic";
    import editDic  from "./components/EditDic";
    import addChildDic  from "./components/AddDic";
    import editChildDic  from "./components/EditDic";
    import {changeDicStatus,removeDic,queryDicList} from '@/api/dic';
    export default {
        components:{
            addDic,
            editDic,
            addChildDic,
            editChildDic
        },
        data() {
           return {
                childLoading:false,
                parentTotal: 0,
                childTotal:0,
                childNowPage:1,
                parentNowPage:1,
                loading: false,
                queryParams:{
                    pageNum:1,
                    pageSize:10,
                    keyWord:"",
                    childFlag:""
                },
                childQueryParams:{
                    pageNum:1,
                    pageSize:10,
                    parentCode:"",
                    showChildFlag:"Y",
                },
                nowParentDic:{},
                parentFields:[
                    {
                        label:"字典编码",
                        prop:"code",
                        width:50
                    },{
                        label:"字典名称",
                        prop:"value",
                        width:50
                    },{
                        label:"排序",
                        prop:"order",
                        width:30
                    },{
                        label:"状态",
                        prop:"status",
                        width:50
                    },{
                        label:"操作",
                        prop:"operation",
                        width:40,
                        fixed:'right'
                    }
                ],
                parentTableData: [],
                childFields:[
                    {
                        label:"字典编码",
                        prop:"code",
                        width:50
                    },{
                        label:"字典名称",
                        prop:"value",
                        width:50
                    },{
                        label:"排序",
                        prop:"order",
                        width:30
                    },{
                        label:"状态",
                        prop:"status",
                        width:50
                    },{
                        label:"操作",
                        prop:"operation",
                        width:40,
                        fixed:'right'
                    }
                ],
                childTableData: []


           }
        },
      
        created(){
            this.selectDicList();
        },
        methods:{
            async changeStatus(row){
                await changeDicStatus(row)
            },
            async selectDicList(){
                this.loading = true;
                if(!this.queryParams.childFlag){
                    this.queryParams.childFlag = '';
                }
                let ret = await queryDicList(this.queryParams);
                let content = ret.data;
                this.parentTotal = content.total;
                this.parentTableData = content.list;
                this.childTotal = 0;
                this.childTableData = [];
                this.loading = false;
            },
            async selectChildDicList(){
                this.childLoading = true;
                if(this.nowParentDic.code != null){
                   this.childQueryParams.parentCode = this.nowParentDic.code;
                }
                this.childQueryParams.childQueryParams = 'Y';
                let ret = await queryDicList(this.childQueryParams);
                let content = ret.data;
                this.childTotal = content.total;
                this.childTableData = content.list;
                this.childLoading = false;
            },
            handleDataChange(row){
                if(row == null){
                    return;
                }
                this.nowParentDic = row;
                this.selectChildDicList();
            },
            addParentDicVo(){
                this.$refs["addDic"].showDialog();
            },
            editParentDicVo(row){
                this.$refs["editDic"].showDialog(row);
            },
            async removeParentDicVo(row){
                this.$confirm('您是否要删除该数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    await removeDic({id:row.id});
                    this.selectDicList();
                }).catch(() => {
                });
            },
            parentHandleSizeChange(val) {
                this.queryParams.limit = val;
                this.selectDicList();
            },
            parentHandleCurrentChange(val) {
                this.queryParams.pageNum = val;
                this.selectDicList();
            },

            addChildDicVo(){
                this.$refs["addChildDic"].showDialog(this.nowParentDic.code);
            },
            editChildDicVo(row){
                this.$refs["editChildDic"].showDialog(row);
            },
            async removeChildDicVo(row){
                this.$confirm('您是否要删除该数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    await removeDic({id:row.id});
                    this.selectChildDicList();
                }).catch(() => {
                });
            },
            childHandleSizeChange(val) {
                this.childQueryParams.limit = val;
                this.selectChildDicList();
            },
            childHandleCurrentChange(val) {
                this.childQueryParams.pageNum = val;
                this.selectChildDicList();
            },
        }
    }

</script>

<style src="../css/index.scss" lang="scss"></style>
<style  lang="scss" scoped>
  .search-item{
        float: left;
        margin: 0 20px 20px 0;
        span{
            color: #606266;
            font-size: 14px;
            margin-right: 0px;
        }
    }
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    /* background: #d3dce6; */
  }
  .bg-purple-light {
    /* background: #e5e9f2; */
  }
  .top-from{
      height: 50px;
  }
  .grid-content {
    border: 1px solid #e1e4e7;
    border-radius: 4px;
    background: #fff;
    height: calc(100vh - 170px);
    overflow: hidden;
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 20px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
   .option-card-button {
        width: 100%;
        margin-left: 0;
        font-size: 12px;
        border-radius: 0;
    }
</style>